<template>
<div class="w-100 h-100">
  <el-button @click="showIcon">点我显示icon</el-button>
  <div class="topo-index background-gray p-relative w-100 h-100" id="topoIndex">

  </div>
</div>
</template>

<script>
import G6 from '@antv/g6'
import { drawImage } from './tools/customNode'
export default {
    name: 'Topo',
    data () {
        return {
            toolbar: null,
            graph: null,
            currentTarget: null
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        init () {
            drawImage()
            // drawCustomNode()
            // customEdge()
            this.drawTopo()
        },
        drawTopo () {
            this.initMenu()
            this.initGraph()
        },
        initMenu () {
            const toolbar = new G6.ToolBar({
                className: 'g6-toolbar-ul',
                getContent: () => {
                    return `
                      <ul>
                        <li code='add' class='p-l-5 p-r-5' title="新增节点">
                         <span class="icon-menu add d-inline-block"></span>
                            <!-- <span>增加节点</span>-->
                        </li>
                        <li code='undo' class='p-l-5 p-r-5 undo' title="撤销">
                         <span class="icon-menu undo d-inline-block"></span>
                        </li>
                        <li code='redo' class='p-l-5 p-r-5 redo' title="回退">
                            <span class="icon-menu redo d-inline-block"></span>
                        </li>
                        <li code='autoZoom' class='p-l-5 p-r-5 full-screen' title="全屏">
                            <span class="icon-menu full-screen d-inline-block"></span>
                        </li>
                        <li code='realZoom' class='p-l-5 p-r-5 fit-screen' title="适应屏幕">
                            <span class="icon-menu fit-screen d-inline-block"></span>
                        </li>
                        <li code='zoomOut' class='p-l-5 p-r-5 zoom-out' title="放大">
                            <span class="icon-menu zoom-out d-inline-block"></span>
                        </li>
                        <li code='zoomIn' class='p-l-5 p-r-5 zoom-in' title="缩小">
                            <span class="icon-menu zoom-in d-inline-block"></span>
                        </li>
                        <li code='selectBox' class='p-l-5 p-r-5 select-box' title="框选">
                            <span class="icon-menu select-box d-inline-block"></span>
                        </li>
                        <li>
                            <input type="text">
                            <button code="aa">点我</button>
                        </li>
                      </ul>
                    `
                },
                handleClick: (code, graph) => {
                    if (code === 'selectBox') {
                        console.log('selectBOx')
                    } else if (code === 'add') {
                        console.log('add')
                    } else if (code === 'undo') {
                        toolbar.handleDefaultOperator(code, graph)
                        // console.log('23322332', this.graph.getStackData())
                        graph.refresh()
                        // this.graph.refreshItem(this.currentTarget.id) // 在undo后更新下item。。。
                    } else if (code === 'redo') {
                        toolbar.handleDefaultOperator(code, graph)
                        graph.refresh()
                    } else {
                        toolbar.handleDefaultOperator(code, graph)
                    }
                }
            })
            this.toolbar = toolbar
        },
        initGraph () {
            const minimap = new G6.Minimap({
                size: [150, 100]
            })
            const { width, height } = document.getElementById('topoIndex').getBoundingClientRect()
            const data = {
                nodes: [
                    {
                        id: '1',
                        label: 'image',
                        x: 150,
                        y: 150,
                        type: 'customeImg',
                        // imgUrl: 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg'
                        img: require('../../assets/logo.png'),
                        icon: {
                            url: require('../../assets/1.jpg'),
                            show: true
                        }
                    },
                    {
                        id: '2',
                        label: 'image1',
                        x: 650,
                        y: 450,
                        type: 'customeImg',
                        // imgUrl: 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg'
                        img: require('../../assets/1.jpg'),
                        icon: {
                            url: require('../../assets/logo.png'),
                            show: false
                        }

                    }
                ],
                edges: [
                    {
                        source: '1',
                        target: '2',
                        style: {
                            stroke: '#666'
                        }
                    }
                ]
            }
            const graph = new G6.Graph({
                container: 'topoIndex',
                width,
                height,
                fitView: true,
                animate: true,
                enabledStack: true, // 撤销和回退功能
                defaultNode: {
                    type: 'image',
                    size: [50, 50]
                },
                modes: {
                    default: ['drag-node', 'click-select', 'drag-canvas']
                },
                plugins: [minimap, this.toolbar]
            })
            graph.on('node:click', e => {
                const target = e.target
                console.log(e, 'asdf', target, '2222222222')
                const img2 = new Image()
                img2.src = 'http://seopic.699pic.com/photo/50055/5642.jpg_wh1200.jpg'
                target.attr('img', img2)
                graph.paint()
                // target.attr('imgSrc', 'http://seopic.699pic.com/photo/50055/5642.jpg_wh1200.jpg')
            })
            // graph.on('node:mouseenter', e => {
            //     console.log(e, '1111')
            // })
            // graph.on('node:mouseleave', e => {
            //     console.log(e, '2222')
            // })
            // graph.on('node:mouseover', e => {
            //     console.log(e, '333')
            // })
            graph.on('node:drag', e => {
                this.currentTarget = e.item.getModel()
            })
            graph.data(data)
            graph.render()
            this.graph = graph
        },
        showIcon () {
            console.log('显示icon')
            const node2 = this.graph.findById('2')
            const model = node2.getModel()
            console.log(node2, 'node2', model)
            // node2.getModel().icon.show = true
            // node2.refresh()
            // node2.attr('icon', {
            //     show: true,
            //     url: model.icon.url
            // })
            // const newModel = {
            //     ...model,
            //     icon: {
            //         show: true,
            //         url: model.icon.url
            //     }
            // }
            // console.log(newModel)
            // this.graph.updateItem(node2, newModel)
            // node2.get
            // this.graph.paint()
            // node2.refresh()
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .g6-minimap{
    position: absolute;
    left: 0;
    bottom: 10px;
    border: 1px solid #eee;
  }
  .g6-toolbar-ul{
    position: absolute;
    width: 300px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > li {
      //padding
    }
    .icon-menu{
      width: 20px;
      height: 20px;
      cursor: pointer;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      &.add {
        background-image: url('../../assets/1.jpg');
      }
      &.undo {
        background-image: url('../../assets/logo.png');
      }
      &.redo {
        background-image: url('../../assets/1.jpg');
      }
      &.full-screen {
        background-image: url('../../assets/1.jpg');
      }
      &.fit-screen {
        background-image: url('../../assets/1.jpg');
      }
      &.zoom-out {
        background-image: url('../../assets/1.jpg');
      }
      &.zoom-in {
        background-image: url('../../assets/1.jpg');
      }
      &.select-box {
        background-image: url('../../assets/1.jpg');
      }
    }
  }
}
</style>
